<script lang="ts" setup>
import type { DataType } from './types';

import type { VxeGridProps } from '#/adapter/vxe-table';

import { Page, useVbenModal } from '@vben/common-ui';

import { Button, message, Modal, Space, Tag } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getApps, postApps, putApps } from '#/api/admin/apps';
import Icon from '#/components/Icons';
import { resetRoutes } from '#/router';

import { FormModalView } from './components';

defineOptions({
  name: 'AdminApp',
});

const router = useRouter();
const routeMeta = router.currentRoute.value.meta;
const viewTitle = routeMeta.title.replace('管理', '');

const gridOptions: VxeGridProps<DataType> = {
  rowConfig: {
    isCurrent: true,
    isHover: true,
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'title', title: '应用名称' },
    { field: 'name', title: '标识' },
    { field: 'description', title: '描述' },
    { field: 'author', title: '作者' },
    { field: 'version', title: '版本' },
    { field: 'status', title: '状态', slots: { default: 'status' } },
    {
      slots: { default: 'action' },
      field: 'action',
      fixed: 'right',
      title: '操作',
      width: 240,
    },
  ],
  height: 'auto',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        const { data } = await getApps({
          page: page.currentPage,
          limit: page.pageSize,
        });
        return data;
      },
    },
  },
  toolbarConfig: {
    custom: true,
    // export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid] = useVbenVxeGrid({
  gridOptions,
});

const handleUpdata = async (row: DataType) => {
  const { msg } = await putApps(row.name);
  message.success(msg);
};

const [FormModal, formModalApi] = useVbenModal({
  // 连接抽离的组件
  connectedComponent: FormModalView,
  onClosed() {
    const formModalData = formModalApi.getData();
    if (formModalData?.isUpdata) {
      resetRoutes();
    }
  },
});

const openDialog = async (row?: DataType | null) => {
  formModalApi.setState({
    title: `卸载应用`,
  });
  formModalApi.setData(row);
  formModalApi.open();
};

const handleInstall = async (row: DataType) => {
  Modal.confirm({
    title: '系统提示',
    content: `确认要安装${row.name}吗?`,
    async onOk() {
      await postApps(row.name);
      message.success(`已安装${row.name}`);
      resetRoutes();
    },
  });
};
</script>

<template>
  <Page auto-content-height>
    <FormModal />
    <Grid :table-title="`${viewTitle}列表`">
      <template #status="{ row }">
        <Tag :color="row.installed === 1 ? 'success' : 'default'">
          {{ row.installed === 1 ? '已安装' : '未安装' }}
        </Tag>
      </template>
      <template #action="{ row }">
        <Space v-if="row.installed === 1">
          <Button type="primary" @click="handleUpdata(row)">
            <template #icon>
              <span class="anticon">
                <Icon icon="ri:refresh-line" />
              </span>
            </template>
            更新
          </Button>
          <Button danger type="primary" @click="openDialog(row)">
            <template #icon>
              <span class="anticon">
                <Icon icon="ri:uninstall-line" />
              </span>
            </template>
            卸载
          </Button>
        </Space>
        <Space v-else>
          <Button type="primary" @click="handleInstall(row)">
            <template #icon>
              <span class="anticon">
                <Icon icon="ri:install-line" />
              </span>
            </template>
            安装
          </Button>
        </Space>
      </template>
    </Grid>
  </Page>
</template>
